<template>
    <div>
        <nav-bar></nav-bar>

        <div class="main " style="margin-top: 20px;">
            <el-row>
                <el-col :span="16" :offset="4">

                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>新闻正文</el-breadcrumb-item>
                    </el-breadcrumb>
                    <el-card style="margin: 1vw 0;  min-height: 520px;">

                        <div class="content">
                            <div class="title">{{articleDetail.title}}</div>
                            <div class="date">
                                <span>发布时间:{{articleDetail.create_date}}</span>
                                <span>作者:{{articleDetail.author}}</span>
                                <span>浏览量:
                                    <template v-if="articleDetail.views==null">
                                        null
                                    </template>
                                    <template v-else>
                                        {{articleDetail.views}}
                                    </template>
                                </span>
                            </div>
                            <div class="txt">
                                <mavon-editor :value="articleDetail.content" :toolbarsFlag="false" :subfield="false"
                                    :shortCut="false" :autofocus="false" :ishljs="true" :boxShadow="false"
                                    fontSize="16px" previewBackground="#FFFFFF" defaultOpen="preview" />
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <!-- <el-col :span="8">
                    <Hot></Hot>
                </el-col> -->
            </el-row>
        </div>

        <Footer style=" bottom: 0;"></Footer>
    </div>
</template>



<script>
    import Vue from "vue";
    import {
        VueTypedJs
    } from "vue-typed-js";
    import "bootstrap/dist/css/bootstrap.css";
    import "bootstrap-vue/dist/bootstrap-vue.css";
    import Footer from './common/footer.vue'
    import navBar from "./common/navBar.vue"
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // use
    Vue.use(mavonEditor);
    export default {
        name: "Index",
        components: {
            VueTypedJs,
            Footer,
            navBar,
        },
        data() {
            return {
                detailId: null,
                articleDetail: {}
            }
        },
        mounted() {
            console.log(this.$route);
            this.detailId = this.$route.params.id
            this.getArtDetail()
        },
        methods: {
            getArtDetail() {
                this.getRequest("/front/article/detail?id=" + this.detailId).then(res => {
                    if (res) {
                        this.articleDetail = res.obj
                    } else {
                        this.$message(res.message)
                    }
                })
            }
        },
    }
</script>
<style lang="scss" scoped>
    * {
        box-sizing: border-box;

    }


    a {
        text-decoration: none;
        color: #333;
    }




    .main {
        overflow: hidden;

        .title {
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            padding-bottom: 1vw;
        }

        .date {
            font-size: 14px;
            color: rgb(161, 161, 161);
            text-align: center;

            span {
                margin: 0 10px;
            }
        }
    }
</style>